<template>
  <view>
    <!-- 我的活动 -->
    <view class="header">
      <view class="pusheractive" :class="{ common: index == 0 }" @click="getactlist">我发布的活动</view>
      <view class="addinative" :class="{ common: index == 1 }" @click="getmyaddact">我参加的活动</view>
    </view>

    <!-- 我发布的活动列表 -->
    <scroll-view v-if="index == 0" scroll-y="true" style="height: 1500rpx" @scrolltolower="moreact">
      <view class="listBox">
        <view class="itemlistBox" v-for="item in myactlist" :key="item.id" @click="godetail(item.id)">
          <view class="itemList">
            <view class="img">
              <image :src="item.cover_image" mode="aspectFill"></image>
              <view :class="{ hotfill: item.status == 1 || item.status == 2, yijieshu: item.status == 3 || item.status == 4, yibaoming: item.status == 0 }">
                {{ item.status_texts }}
              </view>
            </view>
            <view class="textt">
              <view class="h2">{{ item.title }}</view>
              <view class="time">
                <image src="https://qn.boruichengyi.com/static/index/images/time.png" mode="" class="icon"></image>
                <view class="tim" style="flex: 1">{{ item.start_time_text + ' - ' + item.end_time_text }}</view>
              </view>
              <view class="space">
                <image src="https://qn.boruichengyi.com/static/index/images/position.png" mode="" class="icon"></image>
                <view class="spac" style="flex: 1">{{ item.address }}</view>
              </view>
              <view class="initiator">发起人：{{ item.nickname }}</view>
              <view class="num">报名人数：{{ item.activity_user_num + '/' + item.max_num }}</view>
            </view>
            <button type="primary" v-if="item.status == 0" class="sign" @click.stop="goeditor(item.id)">编辑</button>
            <button type="primary" v-else class="sign" @click.stop="exportdata(item.id)">导出数据</button>
          </view>
          <view class="timeday">
            {{ item.endTime }}
            <view style="color: #ec1303; font-size: 24rpx" v-if="item.status == 4">未达成最少报团人数，活动自动取消</view>
          </view>
        </view>
      </view>
    </scroll-view>
    <!--我参加的活动列表 -->
    <scroll-view v-if="index == 1" scroll-y="true" style="height: 1500rpx" @scrolltolower="moreaddact">
      <view class="activelist" v-for="item in myaddactlist" :key="item.id" @click="godetail(item.id)">
        <view class="left">
          <image :src="item.cover_image" mode="aspectFill" />
          <text :class="{ baoming: item.status == 1 || item.status == 2, yijieshu: item.status == 3 || item.status == 4, yibaoming: item.status == 0 }">
            {{ item.status_texts }}
          </text>
        </view>
        <view class="right">
          <view class="title overline">{{ item.title }}</view>
          <view class="time">
            <image src="https://qn.boruichengyi.com/static/index/images/time.png" mode="" style="width: 32rpx; height: 32rpx; vertical-align: bottom"></image>
            {{ item.start_time_text + '-' + item.end_time_text }}
          </view>
          <view class="time">
            <image src="https://qn.boruichengyi.com/static/index/images/position.png" mode="" style="width: 32rpx; height: 32rpx; vertical-align: bottom"></image>
            <view class="singe-line">{{ item.address }}</view>
          </view>
          <view style="display: flex; justify-content: space-between; width: 420rpx">
            <view style="font-size: 24rpx">
              <view class="pusher">发起人：{{ item.nickname }}</view>
              <view class="peoplenum">报名人数：{{ item.activity_user_num + '/' + item.max_num }}</view>
            </view>

            <button :class="{ btn: true, cancelbtn: item.status == 1 || item.status == 0 || item.status == 2 }" v-if="item.status == 1 || item.status == 0 || item.status == 2">
              取消报名
            </button>
            <button class="btndel" v-else @click.stop="godetail(item.id)">删除</button>
          </view>
          <view style="color: #ec1303; font-size: 24rpx" v-if="item.status == 4">未达成最少报团人数，活动自动取消</view>
        </view>
      </view>
    </scroll-view>

    <!-- 没有数据 -->
    <view class="nullbox" v-if="false">
      <view style="border: 1px dotted #ccc; width: 300rpx"><image src="../static/icon/nodata.png" style="width: 300rpx; height: 300rpx"></image></view>
      <view class="nulltext">您还未发布活动</view>
    </view>
  </view>
</template>

<script>
import { timeChange } from '../../utils/tools.js';
export default {
  data() {
    return {
      index: 0,
      myaddactlist: [],
      myactlist: [], // 我发布的活动列表
      actpage: 1,
      actaddpage: 1
    };
  },
  onLoad() {
    // // 获取我发布的活动列表
    // this.getactlist();
  },
  onShow() {
    this.actpage = 1;
    this.actaddpage = 1;
    this.myactlist = [];
    this.myaddactlist = [];
    this.getactlist();
    this.getmyaddact();
  },
  methods: {
    // 触底获取我发布的活动
    async moreact() {
      this.actpage++;

      const res = await uni.$http.post('user/getMyActivityList', {
        size: 5,
        page: this.actpage,
        type: 0
      });

      if (res.data.data.length == 0) {
        return uni.showToast({
          title: '数据已全部加载完毕',
          icon: 'none'
        });
      }
      res.data.data.forEach((item) => {
        item.end_time_text = item.end_time_text.split('-')[1] + '-' + item.end_time_text.split('-')[2].split(':')[0] + ':' + '01-15 01:00:00'.split(':')[1];
        item.start_time_text = item.start_time_text.split('-')[1] + '-' + item.start_time_text.split('-')[2].split(':')[0] + ':' + '01-15 01:00:00'.split(':')[1];
        item.endTime = timeChange(item.end_time);
      });
      this.myactlist.push(...res.data.data);
    },
    // 触底获取我参加的活动
    async moreaddact() {
      this.actaddpage++;
      const res = await uni.$http.post('user/getMyActivityList', {
        size: 5,
        page: this.actaddpage,
        type: 1
      });

      if (res.data.data.length == 0) {
        return uni.showToast({
          title: '数据已全部加载完毕',
          icon: 'none'
        });
      }
      res.data.data.forEach((item) => {
        // console.log(item.end_time_text.split('-')[1] + '-' + item.end_time_text.split('-')[2].split(':')[0] + ':' + '01-15 01:00:00'.split(':')[1]);
        item.end_time_text = item.end_time_text.split('-')[1] + '-' + item.end_time_text.split('-')[2].split(':')[0] + ':' + '01-15 01:00:00'.split(':')[1];
        item.start_time_text = item.start_time_text.split('-')[1] + '-' + item.start_time_text.split('-')[2].split(':')[0] + ':' + '01-15 01:00:00'.split(':')[1];
        item.endTime = timeChange(item.end_time);
      });
      this.myaddactlist.push(...res.data.data);
    },
    // 获取我发布的活动列表
    async getactlist() {
      this.index = 0;
      this.myactlist = [];
      const res = await uni.$http.post('user/getMyActivityList', {
        size: 5,
        page: 1,
        type: 0
      });

      res.data.data.forEach((item) => {
        item.end_time_text = item.end_time_text.split('-')[1] + '-' + item.end_time_text.split('-')[2].split(':')[0] + ':' + '01-15 01:00:00'.split(':')[1];
        item.start_time_text = item.start_time_text.split('-')[1] + '-' + item.start_time_text.split('-')[2].split(':')[0] + ':' + '01-15 01:00:00'.split(':')[1];
        item.endTime = timeChange(item.end_time);
      });
      this.myactlist = res.data.data;
    },
    // 获取我参与的活动列表
    async getmyaddact() {
      this.index = 1;
      this.myaddactlist = [];
      const res = await uni.$http.post('user/getMyActivityList', {
        size: 5,
        page: 1,
        type: 1
      });
      res.data.data.forEach((item) => {
        // console.log(item.end_time_text.split('-')[1] + '-' + item.end_time_text.split('-')[2].split(':')[0] + ':' + '01-15 01:00:00'.split(':')[1]);
        item.end_time_text = item.end_time_text.split('-')[1] + '-' + item.end_time_text.split('-')[2].split(':')[0] + ':' + '01-15 01:00:00'.split(':')[1];
        item.start_time_text = item.start_time_text.split('-')[1] + '-' + item.start_time_text.split('-')[2].split(':')[0] + ':' + '01-15 01:00:00'.split(':')[1];
        item.endTime = timeChange(item.end_time);
      });
      this.myaddactlist = res.data.data;
    },
    // 跳转到详情页
    godetail(id) {
      uni.navigateTo({
        url: '/sub_active/detail/detail?id=' + id
      });
    },
    // 点击导出数据
    async exportdata(id) {
      const res = await uni.$http.post('user/export', {
        activity_id: id,
        token: JSON.parse(uni.getStorageSync('userinfo')).token
      });
      console.log(res);

      uni.downloadFile({
        url: res.data.data,
        success: (res) => {
          console.log(res);
          uni.openDocument({
            filePath: res.tempFilePath,
            showMenu: true
          });
        }
      });
    },
    // 跳转到编辑发布活动页面
    goeditor(id) {
      uni.navigateTo({
        url: '/sub_active/editoract/editoract?id=' + id
      });
    }
  }
};
</script>

<style lang="less">
.header {
  display: flex;
  margin: 30rpx 70rpx;
  width: 608rpx;
  height: 80rpx;
  border-radius: 50rpx;
  background-color: #f8f8f8;
  .common {
    background: linear-gradient(11deg, #0091ff 0%, #21e5ff 100%);
    color: #fff;
  }
  .pusheractive {
    text-align: center;
    line-height: 80rpx;
    font-size: 28rpx;
    width: 306rpx;
    height: 80rpx;
    border-radius: 46rpx 46rpx 46rpx 46rpx;
  }
  .addinative {
    font-size: 28rpx;
    line-height: 80rpx;
    width: 306rpx;
    height: 80rpx;
    text-align: center;
    border-radius: 46rpx 46rpx 46rpx 46rpx;
  }
}
.nullbox {
  margin-left: 226rpx;
  margin-top: 210rpx;
  .nulltext {
    width: 196rpx;
    height: 40rpx;
    font-size: 28rpx;
    margin-left: 52rpx;
    margin-top: 20rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    color: #999999;
  }
}
// 活动列表样式
.listBox {
  width: 702rpx;
  display: flex;
  margin-left: 24rpx;
  flex-direction: column;
  .itemlistBox {
    display: flex;
    flex-direction: column;
    height: 432rpx;
    background: #e8f6ff;
    border-radius: 20rpx;
    margin: 20rpx 0;
    padding: 20rpx 0 20rpx 20rpx;
    box-sizing: border-box;
    position: relative;
    .itemList {
      display: flex;
      .sign {
        width: 160rpx;
        height: 60rpx;
        line-height: 60rpx;
        position: absolute;
        bottom: 30rpx;
        right: 34rpx;
        border-radius: 100rpx;
        font-size: 24rpx;
        background-color: #0398ff;
      }
      .img {
        display: flex;
        width: 220rpx;
        height: 300rpx;
        margin-right: 20rpx;
        position: relative;
        image {
          width: 100%;
          height: 100%;
        }
        .hit {
          position: absolute;
          top: 0;
          left: 0;
          width: 90rpx;
          height: 40rpx;
          background: #000000;
          border-radius: 20rpx 0rpx 20rpx 0rpx;
          opacity: 0.5;
          font-size: 20rpx;
          color: #ffffff;
          line-height: 40rpx;
          text-align: center;
        }
        .full {
          background-color: #ec1303;
          opacity: 0.8;
        }
      }
      .textt {
        width: 392rpx;
        height: 100%;
        display: flex;
        flex-direction: column;

        .h2 {
          // flex: 1;
          font-size: 28rpx;
          font-weight: 800;
          color: #222222;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          text-overflow: ellipsis;
          overflow: hidden;
        }
        .time,
        .space {
          display: flex;
          align-items: center;
          margin-top: 22rpx;
          .icon {
            width: 32rpx;
            height: 32rpx;
          }
        }
        .time {
          .tim {
            font-size: 26rpx;
            font-weight: 500;
            color: #222222;
          }
        }
        .space {
          .icon {
            width: 32rpx;
            height: 32rpx;
          }
          .spac {
            font-size: 26rpx;
            font-weight: 500;
            color: #333333;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            text-overflow: ellipsis;
            overflow: hidden;
          }
        }
        .initiator,
        .num {
          margin-top: 20rpx;
          font-size: 24rpx;
        }
      }
    }
    .timeday {
      font-size: 26rpx;
      font-weight: 500;
      color: #333333;
      margin: 34rpx 0 42rpx 0;
    }
  }
}
// 推荐活动列表
.activelist {
  display: flex;
  /*  width: 702rpx; */
  /* height: 340rpx; */
  padding: 20rpx;
  margin: 20rpx 24rpx 0rpx 24rpx;
  background-color: #e8f6ff;
  .left {
    position: relative;
    width: 220rpx;
    height: 300rpx;
    margin-right: 20rpx;
    image {
      width: 220rpx;
      height: 300rpx;
    }
    .baoming {
      position: absolute;
      color: #fff;
      font-size: 20rpx;
      top: 0;
      left: 0;
      width: 90rpx;
      height: 40rpx;
      border-radius: 30rpx 0 30rpx 0;
      text-align: center;
      line-height: 40rpx;
      background-color: red;
    }
    .yibaoming {
      position: absolute;
      color: #fff;
      font-size: 20rpx;
      top: 0;
      left: 0;
      width: 90rpx;
      height: 40rpx;
      border-radius: 30rpx 0 30rpx 0;
      text-align: center;
      line-height: 40rpx;
      background-color: #7e7e7e;
    }
    .yijieshu {
      position: absolute;
      color: #fff;
      font-size: 20rpx;
      top: 0;
      left: 0;
      width: 90rpx;
      height: 40rpx;
      border-radius: 30rpx 0 30rpx 0;
      text-align: center;
      line-height: 40rpx;
      background-color: #999999;
    }
  }
  .right {
    .title {
      width: 392rpx;
      height: 80rpx;
      font-weight: 700;
      font-size: 28rpx;
      margin-bottom: 10rpx;
    }
    .overline {
      height: 38px;
      word-break: break-all;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
    .time {
      display: flex;
      font-size: 26rpx;
      margin-bottom: 10rpx;
      margin-top: 15rpx;
    }
    .pusher {
      margin-bottom: 20rpx;
      width: 240rpx;
      text-overflow: ellipsis;
      overflow: hidden;
      word-break: break-all;
      white-space: nowrap;
    }
    .btn {
      width: 160rpx;
      height: 60rpx;
      line-height: 60rpx;
      font-size: 24rpx;
      background: #0398ff;
      border-radius: 100rpx 100rpx 100rpx 100rpx;
      margin-top: 20rpx;
      margin-left: 84rpx;
      color: #fff;
    }
  }
}
// 单行文本溢出省略
.singe-line {
  width: 360rpx;
  height: 36rpx;
  text-overflow: ellipsis;
  overflow: hidden;
  word-break: break-all;
  white-space: nowrap;
}
// 爆满取消结束图标
.hotfill {
  position: absolute;
  left: 0;
  top: 0;
  width: 90rpx;
  height: 40rpx;
  font-size: 20rpx;
  text-align: center;
  line-height: 40rpx;
  color: #fff;
  background: #ec1303;
  border-radius: 20rpx 0rpx 20rpx 0rpx;
  opacity: 0.8;
}
.yibaoming {
  position: absolute;
  color: #fff;
  font-size: 20rpx;
  top: 0;
  left: 0;
  width: 90rpx;
  height: 40rpx;
  border-radius: 30rpx 0 30rpx 0;
  text-align: center;
  line-height: 40rpx;

  background-color: #7e7e7e;
}
.yijieshu {
  position: absolute;
  color: #fff;
  font-size: 20rpx;
  top: 0;
  left: 0;
  width: 90rpx;
  height: 40rpx;
  border-radius: 30rpx 0 30rpx 0;
  text-align: center;
  line-height: 40rpx;
  background-color: #999999;
}
// 删除按钮
.btndel {
  width: 160rpx;
  height: 60rpx;
  color: #000000;
  font-size: 28rpx;
  line-height: 60rpx;
  background: #e3e3e3;
  margin-top: 20rpx;
  margin-left: 50rpx;
  border-radius: 100rpx 100rpx 100rpx 100rpx;
}
.cancelbtn {
  margin-left: 0rpx !important;
}
</style>
